<template>
  <div>
    <section id="content">
      <section class="vbox">
        <section class="scrollable padder">
          <section class="panel panel-default">
            <header class="panel-heading font-bold">
              View File
              <input type="hidden" id="id" name="id" value="$!obj.id" />
            </header>
            <input type="hidden" id="subpath" name="subpath" />
            <eegshow :eeg="eeg"></eegshow>
          </section>
        </section>
      </section>
      <a
        href="#"
        class="hide nav-off-screen-block"
        data-toggle="class:nav-off-screen"
        data-target="#nav"
      ></a>
    </section>
    <el-row>
      <el-col :span="8" id="why" style="border: 1px solid transparent"><div></div> </el-col>
      <el-col :span="2">
        <el-button type="button" class="btn btn-default" @click="timeBackward">
          &laquo;
        </el-button>
        <el-button
          type="button"
          class="btn btn-default"
          style="margin: 10px 0 10px 0"
          @click="timeLeft"
        >
          <span> < </span>
        </el-button>
      </el-col>
      <!-- <div class="form-group"> -->
      <el-col :span="3">
        <input
          v-model="exampleInputTime"
          placeholder="Please enter the time"
        />
      </el-col>
      <!-- </div> -->
      <el-col :span="2">
        <el-button
          type="button"
          class="btn btn-default"
          style="margin: 10px 0 10px 0"
          @click="timeRight"
        >
          <span> > </span>
        </el-button>
        <el-button type="button" class="btn btn-default" @click="timeForward">
          &raquo;
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import rbrain from "@/api/eeg";
//import eegshow from '../../../dist/show'
import eegshow from '@/components/eegshow'
export default {

  components: { eegshow },

  data() {
    return {
      countT: 1,
      exampleInputTime: 0,
      //path: "D:\\软件\\WeChat\\download\\WeChat Files\\wxid_yddn7zgdva2i22\\FileStorage\\File\\2022-05\\matfile\\result.mat",
      //path: "D:\\Users\\Administrator\\PycharmProjects\\pythonProject1\\data\\result4.mat",
      //path:"C:\\Users\\Administrator\\Desktop\\北师大活\\data\\ex8ga3.mat",
      //path:"C:\\Users\\Administrator\\Desktop\\北师大活\\01.mat",//这个是叠加的
      //path:"C:\\Users\\Administrator\\Desktop\\北师大活\\data\\01.mat",// 这个是展开的
      //path:"D:\\Program Files\\Polyspace\\R2020b\\bin\\bp.mat",// 这个是展开的
      path:"/home/webrain/Desktop/share/file/sub01_open_prepro_prepro.zip",
      //path:"D:\\软件\\WeChat\\download\\WeChat Files\\wxid_yddn7zgdva2i22\\FileStorage\\File\\2022-10\\"
      //path: "D:\\matlab\\test\\TEST_data\\SET\\my",
      //path: "D:\\matlab\\test\\TEST_data\\SET\\my",
      //path:"C:\\Users\\Administrator\\Desktop\\北师大活\\output\\4\\ec3a68_AATEST_EEG",
      eeg:"",
    };
  },


  methods: {
    //<eegshow :eeg="eeg"></eegshow>只需要改变eeg的值，组件便会自动更新波形。
    init() {
      rbrain
        .getEeg1(0, 5,this.path)
        .then((response) => {

          //console.log(response);

          this.eeg = response.data;//改变了eeg的值之后，</eegshow>组件便会显示出波形
          console.log(response.data)
        })
        .catch((err) => {
          this.$message.error(err.message);
          console.log(err);
        });
    },
    //下面这四个函数都是跳转函数，因为波形都是点击按钮触发的
    timeBackward() {//波形往回跳转5秒
      var newCount = --this.countT - 1;
      if (newCount <= 0) {
        newCount = 0;
      }
      var star = newCount *5;
      var end = star + 5;
      rbrain
        .getEeg1(star, end,this.path)
        .then((response) => {

          this.eeg = response.data;
          // this.generateChartForward(eeg, star, end);
        })
        .catch((err) => {
          this.$message.error(err.message);
          console.log(err);
        });
    },
    timeLeft() {//根据输入框中指定的时间进行跳转，时间结束值为框中填入的值
      var number = parseInt(this.exampleInputTime) * 1;
      var star = number -5;
      var end = star +5;
      if (typeof number == "number") {
        if (star <= 0) {
          // ---------- 获取数据
          rbrain
            .getEeg1(0, 5,this.path)
            .then((response) => {
              this.eeg = response.data;
            })
            .catch((err) => {
              this.$message.error(err.message);
              console.log(err);
            });
        } else {
          // ---------- 获取数据
          rbrain
            .getEeg1(star, end,this.path)
            .then((response) => {

              this.eeg = response.data;
              // this.generateChartForward(eeg, star, end);
            })
            .catch((err) => {
              this.$message.error(err.message);
              console.log(err);
            });
        }
      } else {
        console.log("Please enter the number correctly");
      }
    },
    timeForward() {//波形向前跳转5秒
      var newCount = this.countT++;
      var star = newCount * 5;
      var end = star + 5;
      rbrain
        .getEeg1(star, end,this.path)
        .then((response) => {

          this.eeg = response.data;
          // this.generateChartForward(eeg, star, end);
        })
        .catch((err) => {
          this.$message.error(err.message);
          console.log(err);
        });
    },
    timeRight() {//根据输入框中指定的时间进行跳转，时间开始值为框中填入的值
      var number = parseInt(this.exampleInputTime) * 1;

      console.log(this.exampleInputTime);
      var star = number;
      var end = star + 5;
      if (typeof number == "number") {
        rbrain
          .getEeg1(star, end,this.path)
          .then((response) => {
            console.log(response);
            this.eeg = response.data;
          })
          .catch((err) => {
            this.$message.error(err.message);
            console.log(err);
          });
      } else {
        console.log("Please enter the number correctly");
      }
    },

  },
  mounted() {
    this.init();
  },
};
</script>
